<!--
 * @Description: 
 * @Author: HKH
 * @Date: 2024-11-15 16:02:25
 * @LastEditors: HKH
 * @LastEditTime: 2024-11-15 17:44:06
-->

<script lang="ts" setup>
import { reactive } from 'vue'


const form = reactive({
  username: '',
  password: '',
})

const onSubmit = () => {
  console.log('submit!')
  console.log(form)
}
const onCancel = () => {
  console.log('cancel!')
  Object.keys(form).forEach(key => {
    form[key] = '';
  });
}
</script>

<template>
    <div class="bg">
      <div>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
        <p align="right">没有账号,立即注册?</p>
        <el-form-item label="用户名">
            <el-input v-model="form.username" placeholder="请输入用户名"/>
        </el-form-item>

        <el-form-item label="密码">
            <el-input v-model="form.password" type="password" show-password placeholder="请输入密码"/>
        </el-form-item>

        <el-form-item label="验证码" >
            <el-input id="checkCode" v-model="form.password" type="text" placeholder="请输入收到的验证码"
             style="width: 300px;" ></el-input><img src="./1.png" style="height: 35px;width: 100px;">
            </el-form-item>
        

        <el-form-item>
        <el-button type="warning" @click="onSubmit" >进入</el-button>
        <el-button type="warning" @click="onCancel" >取消</el-button>
        </el-form-item>
    </el-form>
</div>
            </div>
    
</template>

    

<style scoped>
   .el-input#checkCode {
    width: 200px;
}
    .bg{
        width: 1000px;
        height: 600px;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .el-form-item >>> label{
       padding-right: 100px;
        color: #000;
    }
    .el-input{
        width: 500px;
    }
    .el-button{
        margin-left:150px ;
    }
    .el-radio-group{
        margin-left: 100px;
    }


</style>
